<template>
  <view class="content">
    <uni-nav-bar title="首页"></uni-nav-bar>
    <swiper class="banner-box" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
      <swiper-item v-for="(item, index) in bannerImg" :key="index">
        <view class="swiper-item" @click="bannerTo(item.routePath)">
          <image :src="item.url"></image>
        </view>
      </swiper-item>
    </swiper>

    <view v-if="newsShow" class="news-box">
      <view class="close-news" @click="closeNews">
        <image class="close-icon" src="../../static/images/icon/cuowu.png" mode=""></image>
      </view>
      {{ news }}
    </view>

    <view class="module-box">
      <uni-grid :column="4">
        <uni-grid-item></uni-grid-item>
        <uni-grid-item></uni-grid-item>
        <uni-grid-item></uni-grid-item>
        <uni-grid-item></uni-grid-item>
        <uni-grid-item></uni-grid-item>
        <uni-grid-item></uni-grid-item>
        <uni-grid-item></uni-grid-item>
        <uni-grid-item></uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script>

export default {
  data () {
    return {
      bannerImg: [
        {
          name: '',
          url: '../../static/images/banner/微信图片_20220429115331.png',
          routePath: '../../gamePages/checkMines/checkMines'
        },
        {
          name: '',
          url: '../../static/images/banner/u=3397076540,3752399997&fm=253&fmt=auto&app=120&f=PNG.webp',
          routePath: '../../gamePages/2048/2048'
        },
        {
          name: '',
          url: '../../static/images/banner/u=1627436414,1498988997&fm=253&fmt=auto&app=138&f=JPEG.webp',
          routePath: '../../gamePages/drawAndGuess/drawAndGuess'
        },
        {
          name: '',
          url: '../../static/images/banner/u=352872106,1308294498&fm=253&fmt=auto&app=138&f=JPG.webp',
          routePath: ''
        }
      ],
      news: '功能开发中...',  // 消息内容
      newsShow: true,    // 是否显示消息
    }
  },
  onLoad () {

  },
  methods: {
    // 关闭消息
    closeNews () {
      this.newsShow = false
    },
    // 点击banner跳转页面
    bannerTo (routePath) {
      uni.navigateTo({
        url: routePath
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: calc(100vh - 92rpx);
  background: #f9f9f9;
  .banner-box {
    width: 100vw;
    height: 400rpx;
    .swiper-item {
      image {
        width: 100%;
        height: 400rpx;
      }
    }
  }
  .news-box {
    position: relative;
    height: 80rpx;
    width: 80vw;
    margin: 30rpx 10vw;
    line-height: 80rpx;
    background-color: #fffaf3;
    border: #c9ba9b solid 1px;
    color: #c9ba9b;
    text-align: center;
    font-size: 25rpx;
    .close-news {
      position: absolute;
      right: 20rpx;
      .close-icon {
        width: 50rpx;
        height: 50rpx;
        margin-top: 15rpx;
      }
    }
  }
  .module-box {
    width: 100vw;
    height: 50px;
    // padding: 0 5vw;
  }
}
</style>
